<template>
	<view class="container"
		:style="{ '--font-size': fontSize + 'rpx', '--text-color': textColor, '--show-ellipsis': expand ? 'hidden' : 'visible', marginTop: marginTop+'rpx' }">
		<text id="info" class="info-label" :style="{ maxHeight: expand ? 'none' : 1.5 * maxLine + 'em' }">
			<text v-if="showBtn" class="expand-label" :style="{color: expandColor}" @click.stop="onClickExpand">{{ expand ? '收起' : '显示全部' }}</text>
			{{ text }}
		</text>
	</view>
</template>

<script>
	export default {
		props: {
			// 文本
			text: {
				type: String,
				default: ''
			},
			// 字号
			fontSize: {
				type: Number,
				default: 28
			},
			// 文字颜色
			textColor: {
				type: String,
				default: '#333'
			},
			// 收起时最大行数
			maxLine: {
				type: Number,
				default: 1,
			},
			// 展开文本颜色
			expandColor: {
				type: String,
				default: '#333'
			},
			// 距离上面元素的距离
			marginTop: {
				type: String,
				default: '10'
			},
		},
		data() {
			return {
				showBtn: false, // 是否显示展开按钮
				expand: false, // 文字是否展开
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			// 展开/收起
			onClickExpand() {
				this.expand = !this.expand
			},
			
			// 获取文本区域高度计算行数是否展示显示全部按钮
			init() {
				let query = uni.createSelectorQuery().in(this)
				this.$nextTick(() => {
					query.select('#info').boundingClientRect(rect => {
						// console.log('#info', rect)
						// 文字行数
						let lineCount = parseInt(rect.height / uni.upx2px(this.fontSize))
						this.showBtn = lineCount > this.maxLine
						// console.log(`行数：${lineCount} ${this.showBtn}`)
					}).exec()
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		display: flex;
	}

	.info-label {
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		line-height: 1.5;
		text-align: justify;
		font-size: var(--font-size);
		color: var(--text-color);
	}

	.info-label::before {
		content: '';
		float: right;
		width: 0;
		height: 100%;
		margin-bottom: calc(var(--font-size) * -1.5);
	}

	.expand-label {
		float: right;
		clear: both;
		font-size: var(--font-size);
		/* color: dodgerblue; */
	}

	.expand-label::before {
		content: '...';
		color: var(--text-color);
		visibility: var(--show-ellipsis);
	}
</style>